<template>
  <div class="dashboard">
    <div class="mb20">
      <el-button size="small" @click="addDialogFormData.dialogVisible = true">添加停车计费规则</el-button>
    </div>
    <v-table stripe border v-bind="tableObj" max-height="400" row-key="id" @fetchTableData="fetchTableData"
      ref="vTableRef">
      <template v-slot:operate="slotProps">
        <el-button type="text" @click="editGetDetail(slotProps.row.id)">编辑</el-button>
        <el-popconfirm title="确定删除规则吗？" @confirm="delCar(slotProps.row.id)"><el-button slot="reference" type="text"
            style="margin-left:10px">删除</el-button></el-popconfirm>
      </template>
    </v-table>

    <AddAndEditRuleUI :dialogForm="addDialogFormData" @resetForm="addResetFrom" @comfirmForm="addComfirmForm" />

    <AddAndEditRuleUI :dialogForm="editDialogFormData" @resetForm="editResetFrom" @comfirmForm="editComfirmForm" />

  </div>
</template>

<script>
import { getListAPI, delAPI } from '@/apis/rule'
import AddAndEditRuleUI from './comps/AddAndEditRuleUI.vue'
import RuleAdd from './comps/RuleAdd'
import RuleEdit from './comps/RuleEdit'
export default {
  name: 'CarRulePage',
  components: { AddAndEditRuleUI },
  mixins: [RuleAdd, RuleEdit],
  data() {
    return {
      tableObj: {
        tableColumn: Object.freeze([
          { prop: 'ruleNumber', label: '计费规则编号' },
          { prop: 'ruleName', label: '计费规则名称' },
          { prop: 'freeDuration', label: '免费时长（分钟）' },
          { prop: 'chargeCeiling', label: '收费上限（元）' },
          { prop: 'chargeType', label: '计费方式', formatter: (r, c, v) => this.chargeTypeMap[v] },
          { prop: 'ruleNameView', label: '计费规则', width: '300px' },
          { prop: 'operate', label: '操作', slotName: 'operate', headSlotName: 'headOperate', fixed: "right", width: "180" },
        ]),
        tableData: [],
        pagination: {
          currentPage: 1,
          pageSize: 5,
          total: 0,
        },
        payload: {
          showSelection: false,
        }
      },

    }
  },
  beforeCreate() {
    this.chargeTypeMap = { duration: '时长收费', turn: '按次收费', partition: '分段收费' }
  },
  methods: {
    async fetchTableData() {
      const { currentPage, pageSize } = this.tableObj.pagination
      const params = {
        page: currentPage,
        pageSize: pageSize
      }
      const r = await getListAPI(params)
      const data = r.data
      this.tableObj.tableData = Object.freeze(data.rows)
      this.tableObj.pagination.total = data.total
    },
    async delCar(id) {
      console.log('id', id)
      try {
        await delAPI(id)
        this.$message.success('删除成功')
        this.rowIds.length = 0 //删除成功需要把ids记录数组给清空
        this.fetchTableData()
      } catch (error) {
        this.$message.error('删除失败')
      }


    },
  },
  created() {
    this.fetchTableData()
  },
  mounted() { }
}
</script>

<style lang="scss" scoped>
.el-form.demo-form-inline {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 340px) 300px 1fr;
  grid-auto-rows: auto;

  .btns {
    justify-self: flex-end;
  }

}
</style>